<template>
	<view class="carDetail-content">
		<u-navbar :is-back="true" :title="title">
		</u-navbar>
		<view class="carDetail-body">
			<view class="process-status" v-if="pageStatus == 1">
				<view class="status-box">
					<view class="box-left" v-if="carType == 1">
						<image src="../../static/image/house2.png" mode=""></image>
						<view>未通过</view>
					</view>
					<view class="box-left" v-if="carType == 0">
						<image src="../../static/image/house1.png" mode=""></image>
						<view>审核中</view>
					</view>
					<view class="box-left" v-if="carType == 2">
						<image src="../../static/image/house4.png" mode=""></image>
						<view>展示中</view>
					</view>
					<view class="box-left" v-if="carType == 3">
						<image src="../../static/image/house3.png" mode=""></image>
						<view>已下架</view>
					</view>
					<view class="box-right" v-if="carType != 0">
						<u-button type="success" :custom-style="customStyle" shape="circle" size="mini" v-if="carType == 3"
							@click='updownCar'>继续展示</u-button>
						<u-button type="warning" :custom-style="customStyle" shape="circle" size="mini" v-if="carType == 1"
							@click='gotoUpdate'>去修改</u-button>
						<u-button type="error" :custom-style="customStyle" shape="circle" size="mini" v-if="carType == 1 || carType == 3"
							@click="delCar">删除</u-button>
						<u-button :custom-style="customStyle" type="warning" shape="circle" size="mini" v-if="carType == 2"
							@click='updownCar'>取消展示</u-button>
					</view>
				</view>
				<view class="status-tips" v-if="carType == 1">
					未通过原因：内容不符合，虚假信息
				</view>
			</view>
			<u-swiper :list="swpierList" :border-radius="0" height="560" mode="rect"></u-swiper>
			<view class="car-detail">
				<view class="car-name">{{dataForm.title}}</view>
				<view class="car-address">{{dataForm.address}}</view>
				<view class="car-buttom">
					<view class="car-price">预估售价：<text>{{dataForm.price}}万元</text></view>
					<view class="car-time">发布时间：{{dataForm.created_at}}</view>
				</view>
			</view>
			<view class="describe">
				<view class="describe-title">
					车辆详情
				</view>
				<view v-html="dataForm.detail">
				</view>
			</view>
		</view>
		<view class="fun-box">
			<view class="box-item">
				<image class="head-image" src="../../static/tabbar/my.png" mode=""></image>
				<view>{{dataForm.phone}}</view>
			</view>
			<view class="box-item item1" @click.stop="callIt(dataForm.phone)">
				<image src="../../static/image/phone.png" mode=""></image>
				<button size="mini" hover-class="none">联系车主</button>
			</view>
			<view class="box-item item2">
				<image src="../../static/image/share.png" mode=""></image>
				<!-- <view>分享好友</view> -->
				<button size="mini" hover-class="none" open-type='share'>分享好友</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCarDetail,
		updownCar,
		delCar
	} from "@/api/index.js"
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '爱房有车',
				path: '/pages/usedCarDetail/index?carId=' + this.dataForm.id
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '爱房有车',
				path: '/pages/usedCarDetail/index?carId=' + this.dataForm.id
			}
		},
		data() {
			return {
				customStyle:{
					padding:'0 20rpx !important',
				},
				carType: 0,
				pageStatus: 0,
				title: '',
				swpierList: [
					'/static/image/banner.png',
					'/static/image/banner.png',
					'/static/image/banner.png'
				],
				dataForm: {}
			}
		},
		onLoad(op) {
			this.title = op.title
			this.pageStatus = op.pageStatus
			if (op.tabsCurrent) {
				this.carType = op.tabsCurrent
			}
			this.getCarDetail(op.carId)
		},
		methods: {
			gotoUpdate() {
				uni.navigateTo({
					url: '/pages/releaseCar/index?carId=' + this.dataForm.id
				})
			},
			getCarDetail(id) {
				getCarDetail(id).then(res => {
					this.dataForm = res.data
					this.swpierList = JSON.parse(res.data.images).map(ele => {
						return 'https://afyc.chitong.cn/uploads/' + ele
					})
				})
			},
			callIt(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber //仅为示例
				});
			},
			updownCar() {
				updownCar({
					id: this.dataForm.id
				}).then(res => {
					uni.showToast({
						title: '成功！',
						duration: 800
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/mine/index'
						})
					}, 1000)
				})
			},
			delCar() {
				delCar({
					id: this.dataForm.id
				}).then(res => {
					uni.showToast({
						title: '删除成功！',
						duration: 800
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/mine/index'
						})
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss">
	button {
		background-color: transparent;
		color: #fff;
		border: none;
		padding: 0 !important;
	}

	button::after {
		border: none;
	}

	.process-status {
		.status-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25rpx;
			background-color: #4286F4;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			.box-left {
				display: flex;
				align-items: center;
				color: #fff;

				>image {
					width: 56rpx;
					height: 56rpx;
					margin-right: 15rpx;
				}

				>view {
					font-size: 32rpx;
					letter-spacing: 4rpx;
				}
			}

			.box-right {
				/deep/ .u-size-mini {
					margin-right: 15rpx;
				}
			}
		}

		.status-tips {
			background-color: #FEF4F4;
			padding: 20rpx 30rpx;
			color: #FF5151;
			font-size: 24rpx;
		}
	}

	.carDetail-body {


		.car-detail {
			padding: 30rpx;
			background-color: #fff;

			.car-name {
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}

			.car-address {
				color: #999999;
				font-size: 22rpx;
				margin-bottom: 50rpx;
			}

			.car-buttom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.car-price {
					font-size: 22rpx;
					color: #333333;

					>text {
						color: #FE3939;
						font-size: 34rpx;
					}
				}

				.car-time {
					color: #999999;
					font-size: 20rpx;
				}
			}
		}

		.describe {
			padding: 20rpx 20rpx 200rpx 20rpx;
			background-color: #fff;
			margin-top: 20rpx;

			// margin-bottom: 200rpx;
			.describe-title {
				color: #333333;
				font-weight: bold;
				font-size: 32rpx;
				text-align: center;
				margin-bottom: 50rpx;
			}
		}
	}

	.fun-box {
		position: fixed;
		bottom: 0%;
		width: 100%;
		background-color: #fff;
		box-shadow: 0px 10px 20px #d8d8d8;
		display: flex;
		padding: 20rpx;
		justify-content: space-around;

		.box-item {
			display: flex;
			align-items: center;

			>image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 5rpx;
			}

			.head-image {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				margin-right: 5rpx;
			}
		}

		.item1 {
			background-color: #FF5D38;
			padding: 20rpx;
			color: #fff;
			border-radius: 50rpx;
		}

		.item2 {
			background-color: #01C25D;
			padding: 20rpx;
			color: #fff;
			border-radius: 50rpx;
		}
	}
</style>